<template>
  <div class="container">
    <div class="zx-title">
      <i @click="$router.go(-1)"></i>
      <span>{{detail.title}}</span>
    </div>
    <div class="zx-content">
      <div class="article-title">
        <span>{{detail.tradeArea}}</span>
        <span>{{detail.type}}</span>
        <span>{{detail.createTime}}</span>
      </div>
      <div class="zx-article" v-html="detail.memo">

      </div>

    </div>

  </div>

</template>
<script>
  import API from '../api/api'

  export default {
    data() {
      return {
        detail: {},
        data: {}
      }
    },
    beforeRouteEnter(to, from, next) {
      if(from.name=='home'){
       to.meta.isBack=true;
      }
      next();
    },
    mounted() {
      this.getData();
    },
    activated(){
      if(this.$route.meta.isBack){
        this.getData()
      }
      this.$route.meta.isBack=false
    },
    deactivated(){

    },
    methods:{
      getData(){
        this.data.id = this.$route.query.id;
        let url = '/clients/huoban-sales/http/sales/function/product/findById.do';
        let params = {
          data: this.data,
          url: url,
          showLoading: true
        };
        API.request(params).then((res) => {
          if (res.status == 200) {
            this.detail = res.data;
          }
        }).catch(() => {
        })
      }
    }
  }
</script>
<style>
  /*以上为重置样式*/

  .container {
    width: 100%;
    background: #ffffff;
    position: absolute;
    left: 0;
    top: 0;
  }

  .zx-title {
    width: 100%;
    height: 1rem;
    line-height: .55rem;
    background: #ffffff;
    box-sizing: border-box;

  }

  .zx-title i {
    display: inline-block;
    width: .25rem;
    height: .25rem;
    border-left: .05rem solid #000000;
    border-bottom: .05rem solid #000000;
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: .3rem;
    vertical-align: middle;
  }

  .zx-title span {
    display: inline-block;
    width: 5.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: .36rem;
    font-size: .36rem;
    margin-top: .2rem;
    vertical-align: middle;
    text-align: center;
  }

  .zx-content {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
    padding: .2rem .3rem .3rem .3rem;
    box-sizing: border-box;
  }

  .article-title {
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .article-title span {
    font-family: PingFangSC-Medium;
    font-size: .2rem;
    color: #D96435;
    letter-spacing: 0;
    vertical-align: top;
    -webkit-flex: 1;
    flex: 1;

  }

  .article-title span:nth-of-type(2) {
    font-size: .24rem;
    color: #D96435;
    letter-spacing: 0;
    font-weight: bold;
    text-align: center;
  }

  .article-title span:nth-of-type(3) {
    color: #999999;
    letter-spacing: 0;
    text-align: right;
  }

  .zx-article {
    font-family: PingFangSC-Regular;

  }

  .zx-article pre {
    width: 100%;
    font-size: .24rem;
    color: #333333;
    letter-spacing: 0;
    margin-top: .2rem;
    white-space: pre-wrap; /*css-3*/
    white-space: -moz-pre-wrap; /*Mozilla,since1999*/
    white-space: -pre-wrap; /*Opera4-6*/
    white-space: -o-pre-wrap; /*Opera7*/
    word-wrap: break-word; /*InternetExplorer5.5+*/

  }

  .zx-img {
    width: 100%;
    display: block;
    margin-top: .2rem;
  }

  .error {
    font-size: .36rem;
    color: red;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  img {
    width: 100%;
    display: block;
    margin-top: .2rem;
  }

</style>
